<ui:composition template="/templates/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:rich="http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="title">
        Search Member
    </ui:define>
    <ui:define name="body">
        <h1> Member Search</h1>
        <f:view>
            <h:form id="searchForm" name="searchForm">
                <div >
                    <h:panelGrid id="mainGrid" columns="1">
                        <f:facet name="header">
                            <h:outputText value="Member Search"/>
                        </f:facet>
                        <!-- register a PostValidateEvent -->

                        <f:event listener="#{memberBean.searchValidation}" type="postValidate" />
                        <h:inputHidden value="hidden" id="hiddenFieldForErrorMessage"/>
                        <h:message for="hiddenFieldForErrorMessage" errorStyle="color:red"/>

                        <h:panelGroup>
                            <h:outputLabel value="First name:" for="firstNameTextField" />
                            <h:inputText value="#{memberBean.firstName}" id="firstNameTextField" />
                        </h:panelGroup>
                        <h:panelGroup>
                            <h:outputLabel value="Middle name:" />
                            <h:inputText value="#{memberBean.middleName}" id="middleNameTextField" />
                        </h:panelGroup>
                        <h:panelGroup>
                            <h:outputLabel value="Last name:" />
                            <h:inputText value="#{memberBean.lastName}" id="lastNameTextField" />
                        </h:panelGroup>
                        <h:panelGroup>
                            <h:outputLabel value="ID Card No:" />
                            <h:inputText value="#{memberBean.idCardNo}" id="idCardNoTextField" />
                        </h:panelGroup>
                        <h:panelGroup>
                            <h:outputLabel value="Form No:" />
                            <h:inputText value="#{memberBean.formNo}" id="formNoTextField"/>
                        </h:panelGroup>
                        <h:commandButton value="Search Member" action="#{memberBean.search()}"/>
                    </h:panelGrid>
                </div>
                <div>
                    <c:if test="${not empty memberBean.memberBeanList}">
                        <h:dataTable value="#{memberBean.memberBeanList}" var="m"
                                     styleClass="order-table"
                                     headerClass="order-table-header"
                                     rowClasses="order-table-odd-row,order-table-even-row"
                                >
                            <h:column>
                                <!-- column header -->
                                <f:facet name="header">First Name</f:facet>
                                <!-- row record -->
                                <!-- <h:link value="#{m.firstName}" outcome="MemberView.xhtml" >
                                    <f:param name="id" value="#{m.id}" />
                                </h:link>  -->
                                #{m.firstName}
                            </h:column>
                            <h:column>
                                <f:facet name="header">Middle Name</f:facet>
                                #{m.middleName}
                            </h:column>
                            <h:column>
                                <f:facet name="header">Last Name</f:facet>
                                #{m.lastName}
                            </h:column>
                            <h:column>
                                <f:facet name="header">Form No</f:facet>
                                #{m.formNo}
                            </h:column>
                            <h:column>
                                <f:facet name="header">Id Card No</f:facet>
                                #{m.idCardNo}
                            </h:column>
                            <h:column>
                                <f:facet name="header">Phone No</f:facet>
                                #{m.phoneNumber}
                            </h:column>
                            <h:column>
                                <f:facet name="header">Action</f:facet>
                                <h:commandLink  value="View" action="#{memberBean.view(m.id)}" />
                                |
                                <h:commandLink  value="Edit" action="#{memberBean.edit(m.id)}"
                                                onclick="if (! confirm('Do you want to edit this?') ) { return false;}; return true; "  />
                                |
                                <h:commandLink  value="Delete" action="#{memberBean.delete(m.id)}"
                                                onclick="if (! confirm('Do you want to delete this?') ) { return false;}; return true; "  />
                            </h:column>
                        </h:dataTable>
                    </c:if>
                </div>
            </h:form>
        </f:view>
    </ui:define>
</ui:composition>

